import 'package:flutter/material.dart';

class GridView1 extends StatelessWidget {
  const GridView1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 1. 导航条
      appBar: AppBar(
        title: const Text(
          '宫格布局-方式1',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      // 2. 主体部分
      body: GridView(
        // gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        //   // 设置侧轴上的盒子数量
        //   crossAxisCount: 3,
        //   // 设置主轴上的间距
        //   mainAxisSpacing: 10,
        //   // 设置侧轴上的间距
        //   crossAxisSpacing: 15,
        //   // 设置宽高比
        //   childAspectRatio: 3 / 3
        // ),
 
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 100,
          // 设置主轴上的间距
          mainAxisSpacing: 10,
          // 设置侧轴上的间距
          crossAxisSpacing: 15,
          // 设置宽高比
          childAspectRatio: 1
        ),
        
        children: [
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          ),
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          ),
          Container(
            color: Colors.pink,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          ),
          Container(
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          ),
          Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          ),
          Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          ),
          Container(
            color: Colors.purple,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          ),
          Container(
            color: Colors.black,
            alignment: Alignment.center,
            child: const Text('鸿蒙热点1'),
          )
        ],
      ),
    );
  }
}
